/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

// var React = require("react");
// var {
//   AppRegistry,
//   StyleSheet,
//   Text,
//   View
// } = require("react-native");

// ES5 语法
var React = require('react')
var Reactnative = require('react-native');
var Icon = require('react-native-vector-icons/Ionicons');
var Component = React.Component;
var AppRegistry = Reactnative.AppRegistry;
var StyleSheet = Reactnative.StyleSheet
var Text = Reactnative.Text
var View = Reactnative.View
var TabBarIOS = Reactnative.TabBarIOS
var Navigator = Reactnative.Navigator
//var Son = require("./son");

//引入子组件
var List = require("./app/creation/index")  
var Edit = require("./app/edit/index")
var Account = require("./app/account/index")

//底部导航栏
var imoccApp =  React.createClass({
    getInitialState: function () {
      return {
        selectedTab: 'list',
             
      };
     },
    render: function() {
      return (
        <TabBarIOS
          tintColor="#ee735c"
          >
           <Icon.TabBarItem
            title="录播"
            iconName="ios-videocam-outline"
            selectedIconName="ios-videocam"
            selected={this.state.selectedTab === 'list'}
            onPress={()=>{
              this.setState({
                selectedTab:'list' 
              })
            }}
            >
            <Navigator
              initialRoute={{
                name: 'list',
                component: List
              }}
              configureScene={(route) => {
                return Navigator.SceneConfigs.FloatFromRight
              }}
              renderScene={(route, navigator) => {
                var Component = route.component

                return <Component {...route.params} navigator={navigator} />
              }} 
              />
            </Icon.TabBarItem>
          
          <Icon.TabBarItem
            title="观看"
            iconName="ios-recording-outline"
            selectedIconName="ios-recording"
            selected={this.state.selectedTab === 'edit'}
            onPress={()=>{
              this.setState({
                selectedTab:'edit' 
              })
            }}
            >
            <Edit />
          </Icon.TabBarItem>
           <Icon.TabBarItem
            title="更多"
            iconName="ios-more-outline"
            selectedIconName="ios-more"
            selected={this.state.selectedTab === 'account'}
            onPress={()=>{
              this.setState({
                selectedTab:'account' 
              })
            }}
            >
              <Account />
          </Icon.TabBarItem>
          
        </TabBarIOS>
      );
    },
  })
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  });
AppRegistry.registerComponent('imoccApp', () => imoccApp);
